<template>
  <f7-page>
    <f7-navbar title="信息费余额" back-link="返回"></f7-navbar>
    <div class="bg-royal text-align-center">
      <h3 class="float-left text-white bold gap-10">
        已提现信息费￥{{models.balance}}
      </h3>
      <f7-button class="float-right" round href="/mine/finance_reflect/">提现</f7-button>
      <div class="clearfix"></div>
    </div>
    <div class="timeline">
      <div class="timeline-item" v-for="(item,index) in carryList" :key="index">
        <div class="timeline-item-divider" :class="{'bg-red':item.pay_surplus=='recharge' || item.pay_surplus=='information_income'}"></div>
        <div class="timeline-item-content">
          <div class="timeline-item-title">{{item | payType}}</div>
          <div class="timeline-item-subtitle" v-if="item.pay_surplus=='recharge' || item.pay_surplus=='information_income'">计划编号{{item.orderNo}}</div>
          <div class="timeline-item-subtitle"> {{item.time_creation | dataFmt_fmt1('MM-dd E')}}</div>
        </div>
        <h3 class="item-after" :class="{'text-red': item.pay_surplus=='recharge' || item.pay_surplus=='information_income'}">
          <span v-if="item.pay_surplus=='recharge' || item.pay_surplus=='information_income'"> +￥{{item.amount}}</span>
          <span v-if="item.pay_surplus!='recharge' && item.pay_surplus!='information_income'"> -￥{{item.amount}}</span>
        </h3>
      </div>
    </div>

  </f7-page>
</template>

<script>

export default {
  name: 'app',
  data () {
    return {
      models: {
        balance: 0
      },
      query: {
        page: 1
      },
      carryList: []
    }
  },
  methods: {
    async getList () {
      let getListRep = await this.AlipayService.getList({ page: this.query.page })
      if (getListRep.data.status === 'success') {
        this.carryList = getListRep.data.data.lists
      }
    }
  },
  mounted () {
    this.models.balance = this.$f7Route.params.value
    this.getList()
  }
}
</script>

<style scoped>
.ios .page {
  background: #fff;
}
.ios .block {
  margin: 0px 0 15px 5px;
}
.bg-royal {
  background: #a2a2f0;
  padding: 25px 10px;
}
.ios .button {
  background: #ff3b00;
  width: 100px;
  min-height: 38px;
  line-height: 38px;
  color: #fff;
  border-color: #ff3b00;
}
.ios .timeline {
  margin: 15px 0 70px 0;
  padding: 0;
}
.timeline-item-divider {
  margin-top: 8px;
  background: #5eced4;
}
.timeline-item-divider.bg-red {
  background: #fc4e00;
}
.ios .timeline-item-title {
  font-size: 14px;
  font-weight: normal;
}
.ios .timeline-item-subtitle {
  font-size: 11px;
  font-weight: normal;
  color: #666;
}
.item-after {
  position: absolute;
  right: 15px;
  top: 30%;
}
</style>
